<meta charset="UTF-8">
  <div class="content-wrapper" style='height: 100%;'>
    <section class="content-header" style='margin-bottom: 5px;'>
      <span style="text-align:left;margin: -5px 0px 5px 0px;font-size: 18px;" ng-click='test()'>
        	{{tempName}}
      </span>
			<input class="form-control" type="text" placeholder="请输入菜品名称 " ng-model="cardInfor" style='width: 160px;display: inline-block;margin-left: 18%;'>
											
       <div class='butt' ng-click='jump_back()'>返回</div> 
      <div class='butt' ng-click='templeSave()'>保存</div> 
    </section>
    <div style='background: transparent;width: 100%;height: 90%;position: relative;'>
    	
    		<div style='position: absolute;width: 20%;height: 100%;border: 1px solid #ccc;left: 1%;overflow: auto;'>
    				<div style='width: 100%;height: 50px;border-bottom: 1px solid #ccc;font-size: 16px;'>
    						<span style='margin: 12px 0px 0px 2%;display: inline-block;width: 32%;cursor: pointer;font-size: 14px;' ng-click='allCategory()'>全部类别</span>
    						<!--<button style='margin: 12px 1%;padding: 2px 6px;background-color: #f05050;font-size: 12px;width:20%;max-width: 40px;' class="btn pull-right" ng-click='delCategory()'>删除</button>
								<button style='margin: 12px 1%;padding: 2px 6px;background-color: #3c8dbc;font-size: 12px;width:20%;max-width: 40px;' class="btn pull-right" ng-click='updateCategory()'>修改</button>
								<button style='margin: 12px 1%;padding: 2px 6px;background-color: #3c8dbc;font-size: 12px;width:20%;max-width: 40px;' class="btn pull-right" data-toggle="modal" data-target="#addCategory">新增</button>-->
    				</div>
    				<div ng-class="{even:!$even, odd:!$odd}"  ng-repeat='c in classify' ng-click='choiceCategory($event,c.id)'
    					style='position: relative;height: 40px;width: 100%;padding: 0px 0px 0px 14px;font-size: 18px;cursor: pointer;line-height: 40px;'>{{c.name}}</div>
    		</div>
    		<div style='position: absolute;width: 78%;height: 100%;border: 1px solid #ccc;right: 1%;overflow: auto;'>
              <div  class="dataTables_wrapper form-inline dt-bootstrap " style='height: 100%;width: 100%;'>
              	<div >
	              	<div class="col-sm-12" style='padding: 0px;'>
		              	<table id='dishTable' style='width: 100%; position: relative;height:90%; display: block;' id="example1" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
			                <thead style='display: inline-table;width: 100%;background: #ffffff;'>
				                <tr role="row">
				                	<th    style="width: 5%;">选择</th>
				                	<th    style="width: 12%;">菜品名称</th>
				                	<th  style="width: 20%;">供应数量</th>
				                	<th  style="width: 12%;">单位</th>
				                	<th   style="width: 12%;">菜品类别</th>
				                </tr>
			                </thead>
			              <tbody id='dataList' style='display: inline-table;width: 100%;'>
					                <tr ng-hide='dish.status == 0' ng-click="itemSelected($event)" style='position: relative;width: 100%;display: inline-table;' ng-class="{even:!$even, odd:!$odd}" ng-repeat="dish in dishesInfors track by $index">
						                  <td style="width: 5%;">
						                  	<!--{{dish.id}}-->
						                  	<input type="checkbox" name='id' value='{{dish.id}}'	ng-model='dish.checked' />
						                  </td><!--菜品id-->
						                  <td style="width: 12%;">{{dish.name}}</td>
						                  <td style="width: 20%;" >
						                  	<input maxlength="4"  ng-change='valChange(dish.count,$index)' type="text" ng-model='dish.count' ng-init='dish.count' ng-if='dish.checked' />
						                  </td>
						                  <td style="width: 12%;">{{dish.unit_name}}</td>
						                  <td style="width: 12%;">{{dish.category_name}}</td>
					                </tr>
			                </tbody>
		                <tfoot>
		                </tfoot>
	             	  </table>
              	</div>
          	</div> 
        	</div>
			          
    		</div>
    		 
    </div> 
</div>


<style>
	.space{
		padding-left:2px;
		padding-right:2px;
	}
	.box{
		border-top:1px solid #d2d6de;
	}
	.pagination{
		margin:0;
	}
	.odd{background-color: #f9f9f9 !important;}
	.even{background-color: #ffffff !important;}
	.btn{    padding: 10px 12px;}
	.butt{float: right;width: 60px;color: #FFFFFF;background-color: #37C8D2;border: 1px solid #37C8D2;cursor: pointer;
    border-radius: 4px;white-space: nowrap;text-align:center;height: 30px;line-height: 30px;margin: -5px 35px 5px 5px;}
</style>
<script>
					$(document).ready(function() {
							
//							$('#table_example').hide();
  							//$('#example').dataTable();
					} );
					
				
	
</script>